<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="../../assets/toutiao_logo.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" color="#fff" size="18/37.5rem" />
      </template>
    </van-nav-bar>
    <!-- tab导航栏 -->
    <div class="tabs_content">
      <van-tabs @click="tabFn" sticky offset-top="1.22666667rem">
        <van-tab
          v-for="obj in userList"
          :key="obj.id"
          :title="obj.name"
          :name="obj.id"
        >
          <!-- 文章列表内容区域(点击tab导航, 切换的是这个地方的标签在下面) -->
          <!-- (重要): 每个tab导航对应自己的ArticleList(每次循环都是独立的) -->
          <van-pull-refresh
            v-model="isLoading"
            @refresh="onRefresh"
            loading-text=" "
          >
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <ArticleList
                :list="articleList"
                @removeA="removeFn"
              ></ArticleList>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
    <!-- +号组件库 - 频道管理-->
    <van-icon
      name="plus"
      size="14/37.5rem"
      class="moreChannels"
      @click="show = true"
    />
    <!-- 弹出层组件 -->
    <!-- close-on-click-overlay 是否在点击遮罩层后关闭（false 不关闭）(点击空白的地方不关闭) -->
    <van-popup v-model="show" :close-on-click-overlay="false">
      <!-- 弹出层上要显示的内容 -->
      <div class="popup-container">
        <!-- 弹出层的头部区域 -->
        <van-nav-bar title="频道管理">
          <template #right>
            <!-- 右上角x按钮-点击关闭弹出层 -->
            <van-icon
              name="cross"
              size="0.37333333rem"
              color="white"
              @click="show = false"
            />
          </template>
        </van-nav-bar>

        <!-- 弹出层的主体区域 -->
        <div class="pop-body">
          <ChannelEdit></ChannelEdit>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  userChannelApi,
  getArticleListApi,
  dislikeApi,
  reportsApi,
  allChannelApi
} from '@/api'
import ArticleList from './component/ArticleList'
import { Toast } from 'vant'
import ChannelEdit from './ChannelEdit' // 频道编辑
export default {
  data () {
    return {
      userList: [], // 用户已选的频道数组
      articleList: [], // 文章数据
      selChannelId: 0, // 选中频道id (默认是0推荐频道)
      isLoading: false, // 下拉里-加载中
      loading: false,
      finished: false,
      page: 1,
      show: false, // 控制弹出层显示与否
      allList: []
    }
  },
  async created () {
    const [, res] = await userChannelApi()
    console.log(res)
    this.userList = res.data.data.channels
    this.getArticleList()

    // 获取所有频道数据
    const [, res2] = await allChannelApi()
    console.log(res2)
    this.allList = res2.data.data.channels
  },
  methods: {
    async getArticleList () {
      const [, articleRes] = await getArticleListApi({
        channel_id: this.selChannelId,
        timestamp: new Date().getTime().toString(),
        // timestamp: 1556789000001,
        with_top: 1,
        page: this.page
      })
      if (articleRes.data.data?.results.length === 0) {
        this.finished = true
        return
      }
      console.log(articleRes)
      //   articleRes.data.data.results.forEach(obj => {
      //     this.articleList.push(obj)
      //   })
      this.articleList = [...this.articleList, ...articleRes.data.data.results]
      this.isLoading = false
      this.loading = false
      Toast.clear()
    },
    tabFn (nameVal) {
      //   console.log(nameVal)
      this.setChannelId = nameVal
      // 切换频道的时候，先清空再使页面为1
      this.articleList = []
      this.page = 1
      this.getArticleList()
    },
    onRefresh () {
      this.isLoading = false
      // 下拉的时候，先清空数据再重新请求
      this.articleList = []
      this.page = 1
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0 // 轻提示窗口 - 不关闭 (在请求完成关闭)
      })
      this.getArticleList()
    },
    onLoad () {
      this.page++
      this.getArticleList()
    },
    async removeFn (art_id, type) {
      const index = this.articleList.findIndex((obj) => obj.art_id === art_id)
      this.articleList.splice(index, 1)
      //   调用后台业务，删除文章

      if (type === undefined) {
        await dislikeApi({
          // target: art_id.toString()
          // 因为处理大数据已经处理了
          target: art_id
        })
      } else {
        await reportsApi({
          target: art_id,
          //   无值就是不感兴趣
          type: type
        })
      }
      // 大数处理
      //   const [, res] = await dislikeApi({
      //   await dislikeApi({
      //     // target: art_id.toString()
      //     // 因为处理大数据已经处理了
      //     target: art_id
      //   })
      //   await reportsApi({
      //       target: art_id,
      //     //   无值就是不感兴趣
      //       type:0
      //   })
      //   console.log(res)
      // 解决数据删完，还剩一个的问题
      this.page = 1
      this.articleList = []
      this.getArticleList()
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  }
}
</script>
<style scoped lang="less">
.logo {
  width: 115px;
  height: 37px;
}
.tabs_content {
  padding-top: 46px;
}

/* // 设置 tabs 容器的样式 */
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

// 弹出层容器宽度高度铺满屏幕
/*频道编辑弹出层 */
.van-popup {
  width: 100%;
  height: 100%;
}
// .edit_wrap {
//   width: 100%;
//   height: 100%;
// }
.van-icon {
  font-size: 14/37.5rem;
}
.van-popup--center {
  background: url("https://img0.baidu.com/it/u=209526487,1817825372&fm=26&fmt=auto&gp=0.jpg")
    center;
  color: #333;
}
.channel-title span {
  color: #fff;
}
</style>
